<script setup>
import { usePlayerFlyout } from '@/hooks'

const activeQuality = ref('720P 高清')

const qualities = ref([
  {
    label: '1080P 高清'
  },
  {
    label: '720P 高清'
  },
  {
    label: '480P 清晰'
  },
  {
    label: '360P 流畅'
  },
  {
    label: '自动'
  }
])

const containerRef = ref()

const { mouseenter, mouseleave, clearTimer } = usePlayerFlyout(containerRef)

function handleClick(quality) {
  clearTimer(true)
  activeQuality.value = quality
}
</script>

<template>
  <div
    ref="containerRef"
    class="relative"
    @mouseenter="mouseenter"
    @mouseleave="mouseleave"
  >
    <button
      class="relative mr-0.5 inline-flex h-10 cursor-pointer items-center justify-center rounded-md px-2 text-sm outline-none transition-colors duration-200 hover:opacity-60"
    >
      {{ activeQuality }}
    </button>

    <ul
      class="flyout absolute -left-16 bottom-16 hidden w-44 overflow-hidden rounded bg-black/50 text-sm"
    >
      <li
        v-for="item in qualities"
        :key="item.label"
        class="cursor-pointer px-3 py-2 hover:bg-white/10"
        :class="activeQuality === item.label ? 'text-primary' : ''"
        @click="handleClick(item.label)"
      >
        {{ item.label }}
      </li>
    </ul>
  </div>
</template>

<style scoped>
.player-flyout-show .flyout {
  display: block;
}
</style>
